<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="status_bar"></view>
		<myTopBar title="整改联系单" url='../../static/index/button_an.png'></myTopBar>

		<view class="content">
			<!-- 日期选择 + 三个按钮 -->
			<view class="content-part1">
				<!-- 日期选择 -->
				<view class="center-right-">
					<view class="center-right">
						<view class="center-right-inputSelect">
							<text>日期：</text>
							<input @click="visible=true,clickFlag=true" disabled type="text" v-model="data" />
							<view class="center-right-inputSelect-icon" @click="visible=false">
								<u-icon color='#58B6E5' :name='visible?"arrow-up-fill":"arrow-down-fill"'></u-icon>
							</view>
						</view>
						<view :style="!changeFlag?'background-color: #58B6E5':'background-color: #414ce5'" @click="toSearch" class="center-right-btn">查询</view>
					</view>
					<picker-view @click="visible=false" v-if="visible" :value="value" @change="bindChange"
						class="picker-view">
						<picker-view-column>
							<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
						</picker-view-column>
					</picker-view>
				</view>
				<!-- 三个按钮 -->
				<view class="content1-btn">
					<view @click="clickBtn(index)"
						:class="selectIndex===index?'content1-btn-item-current':'content1-btn-item'"
						v-for="item,index in btnList" :key='index'>{{item}}</view>
				</view>
			</view>
		</view>
		<!-- 内容框 + 表格 -->
		<view class="content-part2">
			<!-- 文字框 -->
			<view class="content-part2-text">
				<view class="leftTitle">联系单编号：</view>
				<view class="leftOrderNum">{{leftData.orderNum}}</view>
				<view class="leftTitle">内容：</view>
				<view class="leftOrderNum">
					{{leftData.mainContent}}
				</view>
			</view>
			<!-- 表格 -->
			<view class="">
				<scroll-view scroll-y="true" @scrolltolower="toScroll">
					<u-table>
						<u-tr class="u-tr u-tr-title">
							<u-th :width="index===0?'40rpx':''" v-for="(item,index) in tableTitlelist" :key='index'
								class="u-th">{{item}}</u-th>
						</u-tr>

						<u-tr :style="index%2==0?'background-color: #D2DDF5;':'background-color: #EAEFFA;'"
							:class="index===0?'u-tr-first':'u-tr'" v-for="(item,index) in tableDataList">
							<u-td width="40rpx">
								<text @click="toLeft(index)">{{item.orderNum}}</text>
							</u-td>
							<u-td>{{item.mainContent}}</u-td>
							<u-td>{{item.startDate}}</u-td>
							<u-td>{{item.replyDate}}</u-td>
							<u-td>{{item.replyContent}}</u-td>
							<u-td>{{item.predictTimes}}</u-td>
							<u-td>{{item.situation}}</u-td>
							<u-td>{{item.finish==='0'?'否':'是'}}</u-td>
						</u-tr>
						
						<u-empty icon-size='50' img-width='150' font-size="15" v-if="tableDataList.length===0" text="数据为空" ></u-empty>
					</u-table>
				</scroll-view>

			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import myTopBar from '../topNavigationBar/topNavigationBar'
	export default {
		components: {
			myTopBar
		},
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			for (let i = 2000; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			return {
				background: {
					backgroundColor: '#2169D3'
				},
				years,
				year,
				months,
				month,
				value: [9999, month - 1],
				visible: false,
				clickFlag: false,
				btnList: ['未整改', '整改中', '已整改'],
				selectIndex: -1,
				tableTitlelist: ['单号', '主要内容', '发出日期', '回复日期', '回复内容', '预计完成日期', '复查情况', '是否结案'],
				tableDataList: [],
				status: "loadmore",
				pageNo: 1,
				DateFlag: false,
				searchStatus: 3,
				count: 0,
				leftData:{},
				scrollFlage:false,
				changeFlag:false
			}
		},
		computed: {
			data() {
				if (this.clickFlag) {
					return this.year + '年' + this.month + '月'
				} else {
					return ''
				}
			},
		},
		onLoad() {
			this.selectContact()
		},
		methods: {
			toBack() {
				uni.navigateTo({
					url: '../index/index'
				})
			},
			bindChange: function(e) {
				console.log(e.detail.value);
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.DateFlag = true
			},
			clickBtn(index) {
				this.selectIndex = index;
				this.searchStatus=index
				this.tableDataList=[]
				this.pageNo=1
				this.selectContact()
			},
			/* 查询整改单 */
			async selectContact() {
				if(!this.scrollFlage){
					this.pageNo=1
					this.tableDataList=[]
				}
				let date;
				if (this.month < 10) {
					date = this.year + "-0" + this.month
				} else {
					date = this.year + "-" + this.month
				}
				const params = {
					pageSize: 4,
					pageNo: this.pageNo,
					month: date,
					status: this.searchStatus
				}
				const res = await this.$u.api.selectContact(params)
				if(!res.success){
					return;
				}
				this.count = res.body.data.count
				if (this.tableDataList.length >= this.count) {
					this.status = "nomore"
					return
				} else {
					this.status = 'loadmore'
				}
				res.body.data.list.forEach(item => {
					this.tableDataList.push(item)
				})
				console.log(res.body);
				this.pageNo++;
				this.scrollFlage=false
				
			},
			toSearch() {
				this.changeFlag=true
				setTimeout(()=>{
					this.changeFlag=false
				},200)
				if (!this.DateFlag) {
					this.$u.toast("请选择日期后查询！")
					return;
				}
				this.leftData={}
				this.tableDataList=[]
				this.visible = false
				this.selectContact()
			},
			toScroll() {
				this.scrollFlage=true
				if (this.tableDataList.length >= this.count) {
					// this.$u.toast("没有更多数据！")
					return;
				};
				this.status = 'loading';
				setTimeout(() => {
					this.selectContact()
				}, 2000)
			},
			toLeft(i){
				console.log(this.tableDataList[i]);
				this.leftData=this.tableDataList[i]
			}

		}
	}
</script>

<style>
	page {
		background-color: #2169D3;
		overflow: hidden;
	}
	
	.u-empty{
		width: 560rpx;
	}

	/* 顶部导航栏 */
	/* 手机系统 系统状态栏高度 */
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #2169D3;
	}

	.content-part1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 30rpx 10rpx;
	}

	/* 日期选择 */
	.center-right {
		display: flex;
		margin: 0rpx 20rpx;
		margin-left: 10rpx;
	}

	.center-right-inputSelect {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #58B6E5;
		width: 150rpx;
		height: 30rpx;
		border: 2rpx solid #000000;
		font-size: 16rpx;
		color: #FFFFFF;
		margin-right: 5rpx;
	}

	.center-right-inputSelect input {
		width: 90rpx;
		border-bottom: 3rpx solid #FFFFFF;
		margin-top: 0rpx;
		font-size: 13rpx;
		color: #034AB2;
	}

	.center-right-inputSelect-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 8rpx;
		width: 20rpx;
		height: 16rpx;
		background-color: #FFFFFF;
		border: 1rpx dashed #000000;
	}

	.picker-view {
		position: absolute;
		z-index: 999;
		width: 120rpx;
		height: 120rpx;
		margin-left: 24rpx;
		font-size: 14rpx;
		background-color: #ACC4E6;
	}

	.item {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.center-right-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 85rpx;
		height: 30rpx;
		color: #FFFFFF;
		font-size: 16rpx;
		background-color: #58B6E5;
		border: 2rpx solid #000000;
		border-radius: 10rpx;
	}

	/* 三个按钮 */
	.content1-btn {
		display: flex;
		margin-right: 30rpx;
	}

	.content1-btn-item,
	.content1-btn-item-current {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		font-size: 17rpx;
		width: 90rpx;
		height: 45rpx;
		background: url(../../static/index/button_an.png) no-repeat;
		background-size: 100% 100%;
		margin: 0 10rpx;
	}

	.content1-btn-item-current {
		background-image: url(../../static/index/img_zg.png);
	}


	.content-part2 {
		display: flex;
		align-items: center;
		/* justify-content: space-around; */
		margin-top: 0rpx;
		padding: 0 20rpx;
	}

	/* 文字框 */
	.content-part2-text {
		width: 150rpx;
		height: 220rpx;
		background-color: #FFFFFF;
		margin-right: 20rpx;
		font-size: 15rpx;
		padding:10rpx;
		box-sizing: border-box;
		white-space: nowrap;
		overflow-y: auto;
	}
	
	.leftTitle{
		font-weight: 700;
	}
	
	.leftOrderNum{
		padding:0 10rpx;
		/* box-sizing: content-box; */
		 white-space:normal;//设置文字换行
		 word-wrap : break-word;//设置数字强制换行
		 width: 100rpx;

	}

	/* 表格 */
	.uni-scroll-view{
		width: 560rpx!important;
	}
	.u-tr-first {
		margin-top: 40rpx;
	}

	.u-table {
		width: 100%;
		position: relative;
		height: 220rpx !important;
		/* 		white-space: nowrap;
		overflow: hidden; */
	}

	.u-tr-title {
		position: fixed;
		width: 560rpx;
		height: 60rpx;
		margin-top: -1rpx;
	}

	.u-th,
	.u-td {
		font-size: 14rpx !important;
		border: 1rpx solid #FFFFFF !important;
		text-align: left !important;
	}

	.u-tr {
		width: 560rpx;
		height: 45rpx;
	}

	.u-th {
		background-color: #6096E6 !important;
		color: #FFFFFF !important;
		white-space: nowrap;
		overflow-x: auto;
		overflow-y: hidden;

	}

	.u-td {
		color: #034AB2 !important;
		height: 45rpx;
		white-space: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
	}
</style>
